<template>
  <div class="servece_prop_wrapper">
    <div>
      <p class="common_title_tips">客服中心</p>
      <div class="customer_service">
        <ul>
          <li @click="handleHelp(1)">
            <div class="tool">
              <img src="../../assets/images/avatar.png" alt="" />
              <span>在线客服</span>
            </div>
            <div class="tip">例：有问题，点我试试？</div>
          </li>
          <li @click="handleHelp(2)">
            <div class="tool">
              <img src="../../assets/images/phone.png" alt="" />
              <span>立即致电客服</span>
            </div>
            <div class="tip">如遇繁忙占线请稍后拨打</div>
          </li>
          <li @click="handleHelp(3)">
            <div class="tool">
              <img src="../../assets/images/user.png" alt="" />
              <span>预约通话</span>
            </div>
            <div class="tip">仅限手机财富权限以上用户使用</div>
          </li>
        </ul>
      </div>
    </div>
    <div id="tips">
      <strong>风险提示：</strong>
      <p>
        数据基于历史，不代表未来趋势；每个指标都有局限性，适合不同情况下的市场；股票池基于模型与测试，需要投资者根据不同行情合理应用、控制风险。
      </p>
      <strong>证券咨询服务提供：</strong>
      <p>浙江同花顺云软件有限公司[编号:zx0050]</p>
    </div>
    <div class="helperForProd" @click="toFeedBackPage">意见反馈</div>
  </div>
</template>
<script>
import config from '@/config/index';
export default {
  props: [],
  data() {
    return {};
  },
  methods: {
    toFeedBackPage() {
      location.href = location.protocol + config.feedBackConfig.feedbackTrade;
    },
    //联系我们
    handleHelp(num) {
      const that = this;
      Helper({
        autoTrigger: num, //值可为，1/2/3 分别对应 1.语音助手；2.通话；3.预约通话
        pageId: 'pdt_gdgc_sy', //与产品给的埋点稿的pageId对应
        url_ver: 'SJCGBS-26933',
        sid: 402,
        comefrom: '141', //语音助手问句id comefrom的配置找 徐元佳
        handleWaitNum(waitNum) {
          if (waitNum < 1) {
            that.helpText = '当前无用户排队通话';
          } else {
            that.helpText = `当前有${waitNum}名用户正在排队`;
          }
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.servece_prop_wrapper {
  width: 7.02rem;
  height: auto;
  margin: 0 auto;
  padding-bottom: 0.1rem;
}
.fl_c {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  flex-wrap: wrap;
}
.common_title_tips {
  padding-top: 0.42rem;
  font-size: 0.32rem;
  color: #333333;
  font-weight: bold;
  margin: 0 auto;
}
[theme-mode='black'] .common_title_tips {
  padding-top: 0.42rem;
  font-size: 0.32rem;
  color: #d2d2d3;
  font-weight: bold;
  margin: 0 auto;
}
.only_model {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}
.model {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.only_first {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.6rem;
  height: 3.13rem;
  border-radius: 0.16rem;
  z-index: -1;
  background-color: #ffffff;
}
.other_model {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.6rem;
  height: 2.81rem;
  z-index: -1;
  border-radius: 0.16rem;
  background-color: #ffffff;
}
.only_content {
  height: 1.92rem;
  font-size: 0.34rem;
  padding: 0.42rem 0.48rem;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
[theme-mode='black'] .only_content {
  border-bottom: 1px solid #282828;
}
.other_content {
  height: 2.24rem;
  font-size: 0.34rem;
  padding: 0.42rem 0.48rem;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
[theme-mode='black'] .other_content {
  border-bottom: 1px solid #282828;
}
.only_btn {
  height: 0.88rem;
  font-size: 0.36rem;
  padding: 0.26rem 0;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.other_btn {
  width: 49%;
  font-size: 0.36rem;
  text-align: center;
}
.line {
  width: 1px;
  height: 0.88rem;
  background-color: #dddddd;
}
[theme-mode='black'] .line {
  background-color: #282828;
}
.jc_s {
  justify-content: space-between;
}
.customer_service {
  margin: 0 auto;
  height: 2.72rem;
  background-color: #ffffff;
  border-radius: 0.08rem;
  margin-top: 0.27rem;
}
[theme-mode='black'] .customer_service {
  background-color: #252525;
  margin: 0 auto;
  color: #666666;
  height: 2.72rem;
  border-radius: 0.08rem;
  margin-top: 0.27rem;
}
.customer_service ul {
  padding: 3.2%;
}
.customer_service ul li {
  display: flex;
  display: -webkit-flex;
  display: -webkit-box;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
  font-size: 0.27rem;
  color: #666666;
  height: 0.8rem;
  line-height: 0.8rem;
  box-sizing: border-box;
}
.tool {
  display: flex;
  display: -webkit-flex;
  display: -webkit-box;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  color: #333333;
}
.tool img {
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.07rem;
}
[theme-mode='black'] .tool {
  display: flex;
  display: -webkit-flex;
  display: -webkit-box;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  color: #d9d9d9;
}
.tip {
  font-size: 0.22rem;
}

[theme-mode='black'] .tip {
  font-size: 0.24rem;
}
#tips {
  color: #a3a3a3;
  font-size: 0.22rem;
  line-height: 0.4rem;
  margin: 0 auto;
}
[theme-mode='black'] #tips {
  color: #666666;
  font-size: 0.24rem;
  line-height: 0.4rem;
  margin: 0 auto;
}
.helperForProd {
  color: #4691ee;
  width: 100%;
  text-align: center;
  margin: 0.4rem 0 0.4rem 0;
  font-size: 0.26rem;
}
[theme-mode='black'] .helperForProd {
  color: #4691ee;
  width: 100%;
  text-align: center;
  margin: 0.4rem 0 0.4rem 0;
  font-size: 0.26rem;
}
</style>
